<template>
  <el-select style="width:100%;" :size="styleSize" clearable filterable @change="changeData" v-model="selectValue"
             placeholder="请选择">
    <el-option
        v-for="item in options"
        :key="item.name"
        :label="item.name"
        :value="item.name">
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "nb-select",
  props: ['value', "catalog", "size"],
  data: function () {
    return {
      selectValue: "",
      loading: false,
      options: [],
      styleSize: "small"
    }
  },
  mounted: function () {
    console.info("init");
    this.loadData();
    this.selectValue = this.value;
    if (this.size != null && this.size != "") {
      this.styleSize = this.size;
    }
  },
  watch: {
    value: function (val) {
      this.selectValue = val;
    }
  },
  methods: {
    async loadData() {
      let param = {};
      param.key = this.catalog;
      let res = await this.$http.form("/tenantRest/dictionary/items.htm", param);
      if (res.code === 0) {
        this.options = res.list;
      }

    },
    changeData(value) {
      console.info(value);
      this.$emit('input', value);
    }
  }
}
</script>

<style scoped>

</style>